<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="../../imgs/apple_logo.ico"/>
    <!-- 1. 引入bootstrap.css -->
    <link rel="stylesheet" href="../../plugins/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <title>apple商城首页</title>

    <style>
        img{
            width: 177px;
            height: 155px;
        }
    </style>
</head>
<body>
     <!-- 导航begin -->
     <div class="container-fluid">
        <!-- 定义一行 -->
        <div class="row">
            <nav class="navbar navbar-inverse" role="navigation">
                <div class="container-fluid"> 
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse"
                            data-target="#example-navbar-collapse">
                        <span class="sr-only">切换导航</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">app商城</a>
                </div>
                <div class="collapse navbar-collapse" id="example-navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="login.html">登录</a></li>
                        <li class="active"><a href="index.html">首页</a></li>
                        <li><a href="#">我的购物车</a></li>
                        <li><a href="#">我的订单</a></li>
                        <li><a href="#">安全退出</a></li>
                        <li><img src="../imgs/001.png" style="width: 50px;height: 50px;border-radius: 50%;" alt=""></li>
                    </ul>
                </div>
                </div>
            </nav>
        </div>
    </div>
    <!-- 导航end -->

    <!-- 主要信息 -->
    <div class="container-fluid">
        <div class="row" id="product">
            <!-- <div class="col-xs-12 col-md-3">
                <div class="thumbnail">
                   <img src="imgs/001.png" 
                    alt="通用的占位符缩略图">
                   <div class="caption">
                       <h3 class="text-center">华为智能眼镜</h3>
                       <p>【新品】华为智能眼镜 亮黑色 方形半框光学镜</p>
                       <p class="text-center" style="color: #ccc;font-size:12px;">新品省900</p>
                   </div>
                </div>
           </div> -->
        </div>
    </div>
     <!-- 必须先引入jquery.min.js -->
     <script src="../plugins/jquery.min.js"></script>
     <!-- 引入bootstrap.js -->
     <script src="../plugins/bootstrap-3.4.1-dist/js/bootstrap.js"></script>

     <script>
         //制造数据
         let data = [
             {
                 "id":1,
                 "name":"华为智能眼镜",
                 "desc":"【新品】华为智能眼镜 亮黑色 方形半框光学镜",
                 "remark":"新品省900",
                 "price":5000.0,
                 "url":"001.png"
             },
             {
                 "id":2,
                 "name":"华为手表",
                 "desc":"【新品】华为智能眼镜 亮黑色 方形半框光学镜",
                 "remark":"新品省800",
                 "price":6000.0,
                 "url":"002.png"
             },
             {
                 "id":3,
                 "name":"华为智能手环",
                 "desc":"【新品】华为智能眼镜 亮黑色 方形半框光学镜",
                 "remark":"新品省500",
                 "price":8000.0,
                 "url":"003.png"
             },
             {
                 "id":4,
                 "name":"华为P50",
                 "desc":"【新品】华为智能眼镜 亮黑色 方形半框光学镜",
                 "remark":"新品省900",
                 "price":4000.0,
                 "url":"004.png"
             },
             {
                 "id":5,
                 "name":"华为P50 Pro",
                 "desc":"【新品】华为智能眼镜 亮黑色 方形半框光学镜",
                 "remark":"新品省400",
                 "price":6000.0,
                 "url":"005.png"
             },
             {
                 "id":6,
                 "name":"RS保时捷",
                 "desc":"【新品】华为智能眼镜 亮黑色 方形半框光学镜",
                 "remark":"新品省1000",
                 "price":10000.0,
                 "url":"006.png"
             },
             {
                 "id":7,
                 "name":"保时捷设计款",
                 "desc":"【新品】华为智能眼镜 亮黑色 方形半框光学镜",
                 "remark":"新品省1000",
                 "price":20000.0,
                 "url":"007.png"
             },
             {
                 "id":8,
                 "name":"华为儿童手表",
                 "desc":"【新品】华为智能眼镜 亮黑色 方形半框光学镜",
                 "remark":"新品省1000",
                 "price":30000.0,
                 "url":"008.png"
             },
             {
                 "id":9,
                 "name":"Watch GT2 Pro",
                 "desc":"【新品】华为智能眼镜 亮黑色 方形半框光学镜",
                 "remark":"新品省1000",
                 "price":10000.0,
                 "url":"009.png"
             },
             {
                 "id":10,
                 "name":"华为投影仪",
                 "desc":"【新品】华为智能眼镜 亮黑色 方形半框光学镜",
                 "remark":"新品省1000",
                 "price":7000.0,
                 "url":"100.png"
             }       
         ]

         //jquery是js的框架
         $(function(){
             //js获取dom对象的一个写法

             //js对象
             //let product = document.getElementById("product");

             //jquery对象
             let product = $("#product");
             
             let str = "";
             //主要是为了确保dom操作完成之后,才会执行此处的js代码
             //遍历上面的数据的数组
             for(let i=0;i<data.length;i++){
                    str+='<div class="col-xs-12 col-md-3"> \
                        <div class="thumbnail"> '
                        str+='<img src="imgs/'+data[i].url+'">'; 
                        str+='<div class="caption"> \
                            <h3 class="text-center">'+data[i].name+'</h3> \
                            <p>'+data[i].desc+'</p> \
                            <p class="text-center" style="color: #ccc;font-size:12px;">'+data[i].remark+'</p> \
                            <p class="text-center" style="color: red;font-size:12px;">价格:'+data[i].price+'</p> \
                        </div> \
                        </div> \
                        </div>'
             }

             //product.innerHTML = str;
             product.html(str);

         })

     </script>
</body>
</html>